<template>
    <div style="min-width: 829px">
        <div>
            <div class="vs-search-box">
                <el-form
                    ref="form"
                    :inline="true"
                    :model="paging"
                    label-width="110px"
                >
                    <el-form-item label="门店：">
                        <el-select
                            v-model="paging.store_id"
                            style="width: 250px"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in shopList"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="顾客姓名：">
                        <el-input
                            style="width: 250px"
                            placeholder="支持任意关键字搜索"
                            v-model="paging.username"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button
                            @click="handleCurrentChange(1)"
                            type="primary"
                            >查询</el-button
                        >
                    </el-form-item>
                    <el-form-item label="手机号码：">
                        <el-input
                            style="width: 250px"
                            placeholder="支持手机尾号4位搜索"
                            v-model="paging.phone"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="订单编号：">
                        <el-input
                            style="width: 250px"
                            placeholder="支持订单后4位搜索"
                            v-model="paging.out_trade_no"
                        ></el-input>
                    </el-form-item>

                    <el-form-item label="房间号：">
                        <el-input
                            style="width: 250px"
                            placeholder=""
                            v-model="paging.room"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="床位号：">
                        <el-input
                            style="width: 250px"
                            placeholder=""
                            v-model="paging.bed"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="服务技师：">
                        <el-input
                            style="width: 250px"
                            placeholder=""
                            v-model="paging.staff_id"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="开单日期：">
                        <el-date-picker
                            style="width: 250px"
                            range-separator="至"
                            v-model="paging.bill_date_start"
                            value-format="yyyy-MM-dd"
                            type="daterange"
                            placeholder=""
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="开单时间：">
                        <el-time-picker
                            is-range
                            style="width: 250px"
                            v-model="paging.bill_time_start"
                            range-separator="至"
                            value-format="HH:mm:ss"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            placeholder=""
                        >
                        </el-time-picker>
                    </el-form-item>
                    <el-form-item label="预约方式：">
                        <el-select
                            style="width: 250px"
                            clearable
                            v-model="paging.mode"
                            placeholder="请选择"
                        >
                            <el-option label="大众点评" value="0"> </el-option>
                            <el-option label="小程序" value="1"> </el-option>
                            <el-option label="电话" value="2"> </el-option>
                            <el-option label="我的管家" value="3"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目名称：">
                        <el-input
                            style="width: 250px"
                            v-model="paging.project_name"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <!-- <div class="operation-box clear-float">
                    <el-button
                        style="margin-left: auto"
                        icon="el-icon-download"
                        :loading="isDerive"
                        @click="derive"
                        >导出</el-button
                    >
                </div> -->
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    header-row-class-name="has-gutter-table"
                    style="width: 100%"
                >
                    <el-table-column
                        prop="out_trade_no"
                        label="订单编号"
                        min-width="120"
                    ></el-table-column>
                    <el-table-column
                        prop="bill_date"
                        label="开单日期"
                        width="100"
                    ></el-table-column>
                    <el-table-column
                        prop="bill_time"
                        label="开单时间"
                        width="80"
                    ></el-table-column>
                    <el-table-column label="项目名称" min-width="130">
                        <template slot-scope="scope">
                            <span>{{ scope.row.projectOne.project_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="服务技师" min-width="120">
                        <template
                            slot-scope="scope"
                            v-if="scope.row.projectOne.staff"
                        >
                            {{ scope.row.projectOne.staff.name }}（{{
                                scope.row.projectOne.staff.number
                            }}）
                        </template>
                    </el-table-column>
                    <el-table-column label="排钟类型">
                        <template slot-scope="scope">
                            {{ scope.row.projectOne.staff_type | staffType }}
                        </template>
                    </el-table-column>
                    <el-table-column label="房间号">
                        <template
                            slot-scope="scope"
                            v-if="scope.row.projectOne.room"
                        >
                            {{ scope.row.projectOne.room.room_number }}
                        </template>
                    </el-table-column>
                    <el-table-column label="床位号">
                        <template
                            slot-scope="scope"
                            v-if="scope.row.projectOne.bed"
                        >
                            {{ scope.row.projectOne.bed.number }}
                        </template>
                    </el-table-column>
                    <el-table-column label="顾客姓名" min-width="120">
                        <template slot-scope="scope" v-if="scope.row.user">
                            {{ scope.row.user.username }}
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" min-width="130">
                        <template slot-scope="scope" v-if="scope.row.user">
                            {{ scope.row.user.phone }}
                        </template>
                    </el-table-column>
                    <el-table-column label="预约方式">
                        <template slot-scope="scope">
                            <span v-if="scope.row.reserve">
                                {{ scope.row.reserve.mode | typeMode }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预付金额">
                        <template slot-scope="scope">
                            {{ scope.row.advance_amount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="订单总额（元）">
                        <template slot-scope="scope">
                            {{ scope.row.orders_payable }}
                        </template>
                    </el-table-column>
                    <el-table-column label="支付方式" min-width="140">
                        <template slot-scope="scope">
                            {{ payType(scope.row.pay_type) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="实体卡券">
                        <template slot-scope="scope">
                            <el-image
                                v-if="scope.row.entity_image"
                                class="image-thumbnail"
                                :src="scope.row.entity_image"
                                fit="cover"
                                :preview-src-list="[scope.row.entity_image]"
                            >
                            </el-image>
                            <span v-else>{{ scope.row.entity_code }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="订单状态">
                        <template slot-scope="scope">
                            {{ scope.row.status | orderStatus }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="return_money" label="退款金额">
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="paging.page"
                        :page-size="paging.limit"
                        layout="sizes,prev, pager, next, jumper"
                        :total="paging.total"
                    >
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            recordList: [],
            loading: false,
            loading2: false,
            shopList: [],
            isBtn: false,
            isInfo: false,
            dialogVisible: false,
            isDerive: false,
            dialogVisible2: false,
            payWay: [
                {
                    type: 1,
                    title: "免单支付",
                    icon: "icon-free",
                },
                {
                    type: 2,
                    title: "现金结账",
                    icon: "icon-xianjinzichan",
                },
                {
                    type: 3,
                    title: "银行卡",
                    icon: "icon-yinhangqia-xianxing",
                },
                {
                    type: 4,
                    title: "微信",
                    icon: "icon-yinhangqia-xianxing",
                },
                {
                    type: 5,
                    title: "支付宝",
                    icon: "icon-yinhangqia-xianxing",
                },
                {
                    type: 6,
                    title: "会员卡余额",
                    icon: "icon-yue1",
                },
                {
                    type: 7,
                    title: "大众点评（团购）",
                    icon: "icon-tuangou",
                },
                {
                    type: 8,
                    title: "大众点评（预定）",
                    icon: "icon-yuyue",
                },
                {
                    type: 16,
                    title: "大众点评",
                    icon: "icon-yue1",
                },
                {
                    type: 9,
                    title: "口碑",
                    icon: "icon-koubei",
                },
                {
                    type: 10,
                    title: "WOW",
                    icon: "icon-wow",
                },
                {
                    type: 11,
                    title: "小程序",
                    icon: "icon-xiaochengxu",
                },
                {
                    type: 12,
                    title: "实体卡券",
                    icon: "icon-qiaquan",
                },
                {
                    type: 15,
                    title: "次卡",
                    icon: "icon-yingchengka",
                },
                {
                    type: 13,
                    title: "正大无限卡",
                    icon: "icon-yingchengka",
                },
                {
                    type: 14,
                    title: "其他",
                    icon: "icon-yingchengka",
                },
            ],
            paging: {
                phone:'',
                out_trade_no:'',
                room:'',
                store_id: "",
                bed:'',
                bill_date_start:'',
                bill_time_start:'',
                mode:'',
                project_name:'',
                staff_id:'',
                username:'',
                status:7,
                page: 1,
                total: 0,
                limit: 10,
            },
            order: {},
            pay:{
                id:'',
                phone:'',//手机号
                pay_type:'',//支付方式
                pay_code:'',//验证码
            },
            isCode:true,
            codesSec:60,
            intCode:-1,
            form: {
                id: "", //订单id
                return_money: "", //退款金额
                return_remark: "", //退款备注
            },
            rules: {
                phone: { required: true, message: '请选择负责人', trigger: 'change' },
                pay_type: { required: true, message: '请选择支付方式', trigger: 'change' },
                pay_code: { required: true, message: '请输入验证码', trigger: 'blur' },

                return_money: { required: true, message: "请输入退款金额", trigger: "blur", },
                return_remark: { required: true, message: "请输入退款备注", trigger: "blur", },
            },
            isDerive: false,
            tableData: [],
            store_id:''
        };
    },
    created() {
            this.homegetStore();
    },
    methods: {
        setPayType(row) {
            this.pay.id = row.id;
            this.pay.pay_type = Number(row.pay_type);
            this.dialogVisible2 = true;
        },
        setOrderPayType(){
            this.$refs['payform'].validate(async (valid) => {
                if (!valid) return;
                let { code, data } = await this.$Http.setOrderPayType(this.pay);
                if (code) {
                    this.$message.success("修改订单支付方式成功!");
                    this.handleClose2();
                    this.repairGetList();
                }
            })
        },
        // 订单作废
        async cancelOrder(row){
            let { code, data } = await this.$Http.updateWaste({id:row.id})
            if(code){
                this.$message.success("订单已作废")
                this.homegetStore();
            }
        },
        handleClose2(dom) {
        //   this.form = this.$options.data().form;
        this.$refs["payform"].resetFields();
        this.dialogVisible2 = false;
        dom && dom();
        },
        async getCode() {
            if (!this.isCode) return;
            if (!this.pay.phone) return this.$message.error('请选择负责人')
            this.isCode = false;
            let { code, data } = await this.$Http.ordersPaySms(this.pay)
            if (code) {
                this.$message.success('验证码已发送,注意查收')
            } else return this.isCode = true;
            this.codesSec = 60;
            this.intCode = setInterval(() => {
                this.codesSec--;
                if (this.codesSec <= 0) {
                    clearInterval(this.intCode);
                    this.isCode = true;
                }
            }, 1000);
        },
        payType(types) {
            types = types.split(",");
            let val = [];
            for (let i in types) {
                let v = this.payWay.find((v) => v.type == types[i]);
                if (v) {
                    val.push(v.title);
                }
            }
            return val.join(",");
        },
        async homegetStore() {
            let { code, data } = await this.$Http.homegetStore();
            if (code) {
                // this.paging.store_id = data[0].id;
                this.shopList = data;
                this.handleCurrentChange(1);
            }
        },
        async repairGetList() {
            let obj = Object.assign({}, this.paging);

            if( obj.bill_date_start){
                obj.bill_date_end = obj.bill_date_start[1];
                obj.bill_date_start = obj.bill_date_start[0];
            }else{
                obj.bill_date_end = "";
                obj.bill_date_start = "";
            }

            if(obj.bill_time_start){
                obj.bill_time_end = obj.bill_time_start[1];
                obj.bill_time_start = obj.bill_time_start[0];
            }else{
                obj.bill_time_end = "";
                obj.bill_time_start = "";
            }

            this.loading = true;
            let { code, data } = await this.$Http.ordersgetOrders(obj);
            this.loading = false;
            if (code) {
                data.data.forEach((v) => {
                    if (v.entity_image == "0") v.entity_image = "";
                    v.isEnd = false;
                    if (v.pay_time) {
                        // 起止时间
                        let presentTime = Date.parse(new Date()) / 1000;
                        // 截止时间
                        var date = new Date(v.pay_time);
                        var time = new Date(
                            date.setDate(date.getDate() + 30)
                        ).toLocaleDateString(); //获取当前日期后加30天
                        let getEndTime = new Date(time);
                        let endTime = Date.parse(getEndTime) / 1000;
                        if (presentTime > endTime) {
                            v.isEnd = true;
                        }
                        console.log(presentTime, endTime, v.isEnd);
                    }
                    v.projectOne = v.project.length ? v.project[0] : {};
                });
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.paging = this.$options.data().paging;
            // this.paging.store_id = this.shopList[0].id;
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 60px;
    height: 60px;
}
</style>